<template>
	<view class="page-container">
		<view class="countylist" v-if="levtype==1">
			<view class="countys" @click="getCurrentCity(item.id)" v-for="(item,index) in childrenAreaList"
				:key="item.id" v-show="index<3">
				<image src="http://api.yibi.com.cn/upload/ab/02.png" mode="">
					mode=""></image>
				<text>{{item.name}}</text>
			</view>
			<navigator class="more" url="/mapSubpack/pages/mapCountyList/mapCountyList?id=1">
				<image src="http://api.yibi.com.cn/upload/ab/more.png" mode="">
					mode=""></image>
				<text>更多</text>
			</navigator>
		</view>
		<view class="counties" v-if="levtype==2 || levtype==3">
			<view class="cityName" @click="showCity">
				<text>{{areaInfo.name}}</text>
				<view :class="{icon:showcounty}">
					<wd-icon name="fill-arrow-down" size="16px" color="#000"></wd-icon>
				</view>
			</view>
			<view class="intro">
				<text>|</text>
				<text>{{areaInfo.info}}</text>
			</view>
			<view v-if="showcounty" class="down">
				<text :style="{display:item.id!=areaInfo.id?'':'none'}" v-for="item in areaList"
					@click='getCurrentCity(item.id)'>{{item.name}}</text>
			</view>
		</view>
		<view v-if="levtype==2 || levtype==3 ||levtype==4" class="otherMak" :style="{top:levtype==4?'0':'100rpx'}">
			<view class="o_mark" :style="{flexWrap:showSpot?'wrap':'',overflow:showSpot?'':'hidden'}">
				<view v-for="(item, index) in tagList" :key="index" class="scroll-item"
					:class="{ active: tagId === item.id }" @click="scrollToCenter(index,item.id)">
					<image
						:src="item.icon?baseUrl+item.icon:'http://api.yibi.com.cn/upload/default/20250507/e6f26644cafb9f08f070329739332366.png'"
						mode="heightFix" />
					<text>{{ item.name }}</text>
				</view>
			</view>
			<view class="rightDown">
				<text class="yiny"></text>
				<view class="" @click="getShowSopt">
					<image :class="{icon:!showSpot}" src="http://api.yibi.com.cn/upload/ab/up.png" mode=""></image>
					<text>更多</text>
				</view>
			</view>
		</view>
		<!-- 地图 -->
		<map id="myMap" :latitude="mapCenter.latitude" :polyline='polyline' :longitude="mapCenter.longitude"
			:scale="scale" :max-scale="maxScale" :enable-poi='false' show-location :enable-overlooking="false"
			:show-compass="false" :enable-zoom="true" :enable-scroll="true" @regionchange="regionchange"
			:markers="markerTotal" @markertap="markertap" :style="{marginTop:levtype>3?'100rpx':''}"></map>
		<!-- 地图上面固定点 -->
		<view class="fixedLux">
			<view class="lux" @click="getPancel" v-if="lineList.length>0">
				<image v-if="levtype!=4" src="http://api.yibi.com.cn/upload/ab/04.png" mode=""></image>
				<image v-else src="http://api.yibi.com.cn/upload/ab/line2.png" mode=""></image>
				<text>自驾路线</text>
			</view>
			<view class="dingw" @click="moveToLocation">
				<image src="http://api.yibi.com.cn/upload/ab/03.png" mode=""></image>
				<text>定位</text>
			</view>
		</view>
		<view v-if="levtype==4" class="fixedIndex" @click="getPancel2">
			<image src="http://api.yibi.com.cn/upload/ab/home.png" mode="">
			</image>
		</view>
		<!-- 景区详情 -->
		<view v-if="(panelHeight || panelHeight2)&& levtype==1 && lineId" class="scroll">
			<!-- <view class="scroll"> -->
			<scroll-view :show-scrollbar='false'
				:style="{bottom:(panelHeight+panelHeight2+3)+'px',transform:`translatex(-${scrollLeft}px)`,width:tagList.length*70+'px'}"
				class="scroll-container">
				<view v-for="(item, index) in tagList" :key="index" class="scroll-item"
					:class="{ active: tagId === item.id }" @click="scrollToCenter(index,item.id)">
					<image
						:src="item.icon?baseUrl+item.icon:'http://api.yibi.com.cn/upload/default/20250507/e6f26644cafb9f08f070329739332366.png'"
						mode="heightFix" />
					<text>{{ item.name}}</text>
				</view>
			</scroll-view>
		</view>
		<!-- 景区和路线上marker点击 -->
		<view>
			<wd-floating-panel @heightChange="handleHeightChange" v-model:height="panelHeight2" :anchors='anchors'>
				<view class="scenicDetail">
					<!-- <button @click="getScale">getScale</button> -->
					<view class="title">
						<text>{{storeInfo.name}}</text>
						<view class="btn">
							<button v-if="levtype!=4 && storeInfo.go_detail"
								@click="resMerchantIndexApi(storeInfo.id)">进入景区</button>
							<view class="" v-if="storeInfo.ticket_status">
								<wd-icon name="cart" size="18px"></wd-icon>
								<text @click="goPay(storeInfo.ticket_url)">购票</text>
							</view>
						</view>
					</view>
					<view class="tip">
						<view class="tips">
							<text v-for="item in labels">{{item}}</text>
						</view>
						<view @click="togglePlay(storeInfo.audio_url)" class="audio"
							v-if="storeInfo.audio_url && !isPlaying">
							<image src="http://api.yibi.com.cn/upload/ab/yp1.png" mode=""></image>
							<text>语音讲解</text>
						</view>
						<view @click="stopAudio" class="audio" v-if="storeInfo.audio_url && isPlaying">
							<image src="http://api.yibi.com.cn/upload/ab/yp2.gif" mode=""></image>
							<text>停止讲解</text>
						</view>

					</view>
					<view class="swiper">
						<view class="time" v-if="storeInfo.open_hours || storeInfo.end_time">
							<view class="openTime" v-if="storeInfo.open_hours">
								<text>开放时间：</text>
								<text>{{storeInfo.open_hours}}</text>
							</view>
							<text v-if="storeInfo.end_time">停止入园时间：{{storeInfo.end_time}}</text>
						</view>
						<wd-swiper v-if="swiperList.length>0" :list="swiperList" autoplay
							@click="handleClick"></wd-swiper>
					</view>
	<!-- 				<view class="address">
						<image src="http://api.yibi.com.cn/upload/ab/map.png" mode=""></image>
						<view class="info">
							<text>四川省阿坝藏族羌族自治州茂县凤仪镇</text>
							<text>距离100km</text>
						</view>
						<view class="getLoc">
							<image src="http://api.yibi.com.cn/upload/ab/address.png" mode=""></image>
							<text>导航</text>
						</view>
					</view> -->
					<text class="contentText">
						{{storeInfo.info}}
					</text>
					<view class="checkSpot" v-if="lineId">
						<wd-icon :color="currentIndex==0?'#A7A7A7':'#1B9D61'" name="arrow-left" size="22px"
							@click="currentIndexAdd(-1)"></wd-icon>
						<view class="dot">
							<text :class="{act:currentIndex==d}" v-for="(i,d) in merchantList"></text>
						</view>
						<wd-icon :color="currentIndex==(merchantList.length-1)?'#A7A7A7':'#1B9D61'" name="arrow-right"
							size="22px" @click="currentIndexAdd(1)"></wd-icon>
					</view>
				</view>
			</wd-floating-panel>
		</view>
		<!-- 景区首页点击 -->
		<view >
			<wd-floating-panel @heightChange="handleHeightChange" v-model:height="panelHeight3" :anchors='anchors'>
				<view class="scenicDetail">
					<view class="title">
						<text>{{storeInfo2.name}}</text>
						<view class="btn">
							<!-- <button>进入景区</button> -->
							<view class="" v-if="storeInfo2.ticket_status">
								<wd-icon name="cart" size="18px"></wd-icon>
								<text @click="goPay(storeInfo.ticket_url)">购票</text>
							</view>
						</view>
					</view>
					<view class="tip">
						<view class="tips">
							<text v-for="item in labels2">{{item}}</text>
						</view>
						<view @click="togglePlay(storeInfo.audio_url)" class="audio"
							v-if="storeInfo.audio_url && !isPlaying">
							<image src="http://api.yibi.com.cn/upload/ab/yp1.png" mode=""></image>
							<text>语音讲解</text>
						</view>
						<view @click="stopAudio" class="audio" v-if="storeInfo.audio_url && isPlaying">
							<image src="http://api.yibi.com.cn/upload/ab/yp2.gif" mode=""></image>
							<text>停止讲解</text>
						</view>
					</view>
					<view class="swiper">
						<view class="time" v-if="storeInfo.open_hours || storeInfo.end_time">
							<view class="openTime" v-if="storeInfo.open_hours">
								<text>开放时间：</text>
								<text>{{storeInfo.open_hours}}</text>
							</view>
							<text v-if="storeInfo.end_time">停止入园时间：{{storeInfo.end_time}}</text>
						</view>
						<wd-swiper v-if="swiperList2.length>0" :list="swiperList2" autoplay
							@click="handleClick"></wd-swiper>
					</view>
					<!-- 						<view class="address">
						<image src="http://api.yibi.com.cn/upload/default/20250507/f6720f739c1b8d5c4b1604994e1a3d7f.png"
							mode=""></image>
						<view class="info">
							<text>四川省阿坝藏族羌族自治州茂县凤仪镇</text>
							<text>距离100km</text>
						</view>
						<view class="getLoc">
							<image src="http://api.yibi.com.cn/upload/default/20250507/9451bc613b44d77e6b86387beaed4b35.png"
								mode=""></image>
							<text>导航</text>
						</view>
					</view> -->
					<text class="contentText">
						{{storeInfo2.info}}
					</text>
					<view class="activity">
						<text>景区活动</text>
						<navigator v-for="(item,index) in eventList" :key="item.id" class="info"
							:url="'/mapSubpack/pages/activityInfo/activityInfo?id='+item.id">
							<image
								:src="item.img_url?baseUrl+item.img_url:'http://api.yibi.com.cn/upload/default/20250508/9905aacd5ff41d45f6422addd3bd30c9.png'"
								mode="aspectFill"></image>
							<view class="text">
								<text>{{item.name}}</text>
								<view class="">
									<text>详情</text>
									<wd-icon name="play" color="#fff" size="16px"></wd-icon>
								</view>
							</view>
						</navigator>

					</view>
				</view>
			</wd-floating-panel>
		</view>
		<!-- 网红路线 -->
		<view >
			<wd-floating-panel @heightChange="handleHeightChange" v-model:height="panelHeight" :anchors='anchors'>
				<view class="hotWay">
					<view class="img">
						<image src="http://api.yibi.com.cn/upload/ab/hot.png" mode=""></image>
					</view>
					<view class="wayBox" v-for="i in lineList" :key="i.id" @click="openWay(i.id,i.type)">
						<image
							:src="i.icon?baseUrl+i.icon:'https://qcloud.dpfile.com/pc/ZJTTXc8YEzlrEBbpwtO0rjs43Z_XBTcgFXDYG5SiPGdB-04ghU-ZhTXmtyRZeF8s.jpg'"
							mode="" />
						<view class="wayTitle">
							<text>{{i.name}}</text>
						</view>
						<view class="info">
							<text>建议游玩时间：{{i.duration}} </text>
							<text>{{i.info}}</text>
						</view>
					</view>
				</view>
			</wd-floating-panel>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		computed
	} from 'vue'
	import {
		onReady,
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		mapAreaList,
		merchantIndexApi,
		mapMerchantDetail,
		childrenAreaById,
		mapLineDetail,
		mapFacilityDetail
	} from '@/api/map';
	const baseUrl = 'http://114.55.113.117'
	const audioContext = ref(null)
	// import import qqmapsdk from '@/utils/map.js'
	const tagId = ref('') //当前选择的设施类型
	const firstMap = ref(true)
	const panelHeight = ref(0) //路线浮窗高度
	const panelHeight2 = ref(0) //marker点浮窗高度
	const panelHeight3 = ref(0) //景区首页点浮窗高度
	const scale = ref(0) //地图缩放比例
	const mapContext = ref(null) //地图上下文实例
	const screenHeight = ref(0) //屏幕高度
	const showcounty = ref(false) //显示地区下拉
	const showSpot = ref(false) //显示更多设施类型
	const levtype = ref(1) //当前地图级别1-州，2-县，3-镇，4-景区/商家
	const anchors = ref([]) //浮窗可展示的高度
	const currentIndex = ref(0) //当前maker点的下标
	const mapCenter = ref({
		latitude: 39.90469,
		longitude: 116.40717
	}) //地图中心点
	const polyline = reactive([]) //路线
	const areaList = ref([]) //地区列表
	const childrenAreaList = ref([])
	const lineList = ref([]) //线路
	const merchantList = ref([]) //景区列表
	const tagList = ref([]) //类型列表
	const merchantMarker = ref([]) //景区Marker
	const areaInfo = ref({}) //当前地区信息
	const maxScale = ref(20) //最大缩放比例
	const lineId = ref(0) //线路id
	const curMarker = ref('') //被点击的markerID
	const storeInfo = ref({}) //marker点信息
	const labels = ref({}) //marker标签信息
	const labels2 = ref({}) //景区首页标签信息
	const storeInfo2 = ref({}) //景区首页信息
	const swiperList = ref([]) //marker信息轮播列表
	const swiperList2 = ref([]) //景区首页轮播列表
	const eventList = ref([]) //景区首页活动列表
	// const includePoints = ref([]) //视野范围内显示
	const Boundary = ref({
		southwest: {
			latitude: null,
			longitude: null,
		},
		northeast: {
			latitude: null,
			longitude: null,
		}
	}) // 地图范围限制
	onReady(() => {
		if (audioContext.value) {
			audioContext.value.destroy()
		}
		audioContext.value = uni.createInnerAudioContext();
		// 设置音频源（可以是网络或本地路径）
		// audioContext.value.src = src ? baseUrl + src : null
		// audioContext.value.autoplay = false
	})
	onLoad((options) => {
		//范围限定
		getMapContext().then(() => {
			if (options.merchantId) {
				resMerchantIndexApi(options.merchantId)
			} else {
				resMapAreaList(options.id || 1, options.lev || 0)
			}
		})
		scrollToCenter(0)
		const systemInfo = uni.getWindowInfo()
		screenHeight.value = systemInfo.screenHeight
		anchors.value = [0, systemInfo.screenHeight * 0.3, systemInfo.screenHeight * 0.7]


	})
	onUnload(() => {
		if (audioContext.value) {
			audioContext.value.destroy()
		}
	})
	const showCity = () => {
		showcounty.value = !showcounty.value
	}
	const getShowSopt = () => {
		showSpot.value = !showSpot.value
	}
	//轮播点击
	function handleClick(e) {
		console.log(e)
	}

	// 获取地图上下文
	const getMapContext = () => {
		return new Promise(resolve => {
			setTimeout(() => {
				const context = uni.createMapContext('myMap')
				mapContext.value = context // 存储到 ref
				// Overlay1()
				resolve(context)
			}, 300)
		})
	}

	//marker点击
	const markertap = (e) => {
		curMarker.value = e.detail.markerId
		if (levtype.value != 4) {
			resMapMerchantDetail(e.detail.markerId)
		} else {
			resMapFacilityDetail(e.detail.markerId)
		}
		merchantList.value.forEach((a, d) => {
			if (a.related_id == e.detail.markerId) {
				currentIndex.value = d
			}
		})
	}
	// 线路详情
	const resMapLineDetail = async (id, type) => {
		await mapLineDetail({
			id,
			type
		}).then(res => {
			console.log(res);
			const result = res.result
			tagList.value = result.tagList
			merchantList.value = result.linePointList
			if (levtype.value != 4) {
				resMapMerchantDetail(merchantList.value[0].related_id)
			} else {
				resMapFacilityDetail(merchantList.value[0].related_id)
			}
			currentIndex.value = 0

			// areaInfo.value = result.areaInfo
			console.log(result.linePointList);
			getOver(result.areaInfo)
		})
	}
	const openWay = (id, type) => {
		lineId.value = id
		resMapLineDetail(id, type)
	}
	//marker点信息
	const resMapMerchantDetail = async (id) => {
		console.log('marker', id, curMarker.value);
		swiperList.value = []
		labels.value = []
		await mapMerchantDetail({
			id
		}).then(res => {
			const result = res.result
			console.log(res);
			// tagList.value = result.tagList
			storeInfo.value = result.merchant
			// initAudio(result.merchant.audio_url)
			labels.value = result.merchant.labels ? result.merchant.labels.split(',') : ''

			if (!panelHeight2.value) {
				panelHeight2.value = anchors.value[1]
			}
			result.attachList.forEach(a => {
				swiperList.value.push(baseUrl + a.url)
			})
		})
		console.log(curMarker.value, );
	}
	//商家/景区设施详情
	const resMapFacilityDetail = async (id) => {
		swiperList.value = []
		await mapFacilityDetail({
			id
		}).then(res => {
			const result = res.result
			console.log(res);
			// tagList.value = result.tagList
			storeInfo.value = result.facility

			if (!panelHeight2.value) {
				panelHeight2.value = anchors.value[1]
			}
			result.attachList.forEach(a => {
				swiperList.value.push(baseUrl + a.url)
			})
		})
	}
	//商家、景区地区管理详情首页
	const resMerchantIndexApi = async (id) => {
		swiperList2.value = []
		labels2.value = []
		tagId.value = ''
		lineId.value = ''
		panelHeight2.value = 0
		curMarker.value = ''
		await merchantIndexApi({
			merchantId: id
		}).then(res => {
			console.log(res);
			const result = res.result
			eventList.value = result.eventList
			tagList.value = result.tagList
			merchantList.value = result.facilityList
			lineList.value = result.lineList
			storeInfo2.value = result.merchant
			labels2.value = result.merchant.labels ? result.merchant.labels.split(',') : ''
			result.attachList.forEach(a => {
				swiperList2.value.push(baseUrl + a.url)
			})
			getOver(result.merchant)
		})

	}
	//当前路线景点切换
	const currentIndexAdd = (a) => {
		if (a == -1 && currentIndex.value > 0) {
			currentIndex.value = currentIndex.value + a
			if (levtype.value != 4) {
				resMapMerchantDetail(merchantList.value[currentIndex.value].related_id)
			} else {
				resMapFacilityDetail(merchantList.value[currentIndex.value].related_id)
			}
		}
		if (a == 1 && currentIndex.value < merchantList.value.length - 1) {
			currentIndex.value = currentIndex.value + a
			if (levtype.value != 4) {
				resMapMerchantDetail(merchantList.value[currentIndex.value].related_id)
			} else {
				resMapFacilityDetail(merchantList.value[currentIndex.value].related_id)
			}
		}
	}
	// 查询地区管理列表
	const resMapAreaList = async (id, lev) => {
		if (panelHeight2.value) {
			panelHeight2.value = 0
		}
		if (panelHeight3.value) {
			panelHeight3.value = 0
		}

		await mapAreaList({
			areaId: id
		}).then(res => {
			console.log('返回成功');
			const result = res.result
			lineList.value = result.lineList
			childrenAreaList.value = result.childrenAreaList
			areaList.value = result.areaList
			merchantList.value = result.merchantList
			tagList.value = result.tagList
			areaInfo.value = result.areaInfo
			tagId.value = ''
			curMarker.value = ''

			getOver(result.areaInfo)
		}).catch(res => {
			console.log(res, '返回失败');
		})
	}

	//处理覆盖物以及范围
	const getOver = (info, lev) => {
		levtype.value = info.level
		Boundary.value = {
			southwest: { // 西南角经纬度
				latitude: info.sw_lat,
				longitude: info.sw_lnt,
			},
			northeast: { // 东北角经纬度
				latitude: info.ne_lat,
				longitude: info.ne_lnt,

			}
		}

		mapContext.value.setBoundary(Boundary.value)
		mapCenter.value = {
			latitude: info.lat,
			longitude: info.lnt,
		}
		// 分段变化不会出现scale失效
		if (levtype.value == 1) {
			scale.value = 5
			setTimeout(() => {
				scale.value = 6
			}, 200)
		} else if (levtype.value == 2) {
			scale.value = 10
			setTimeout(() => {
				scale.value = 11
			}, 200)
		} else if (levtype.value == 3) {
			scale.value = 15
			setTimeout(() => {
				scale.value = 16
			}, 200)
		}

		if (!info.sketch) {
			console.log('remove删除');
			mapContext.value.removeGroundOverlay({
				id: 1,
				success: () => {
					firstMap.value = true
				}
			})
			return
		}
		if (firstMap.value) {
			console.log('add新加');
			mapContext.value.addGroundOverlay({
				id: 1,
				src: baseUrl + info.sketch, // 手绘地图图片路径
				zIndex: 2,
				bounds: Boundary.value,
				success: (res) => {
					firstMap.value = false
				},
				fail: (err) => {
					console.error('加载失败', err); // 强制输出错误详情
				},
			});
		} else {
			console.log('update修改');
			mapContext.value.updateGroundOverlay({
				id: 1,
				src: baseUrl + info.sketch, // 手绘地图图片路径
				zIndex: 2,
				bounds: Boundary.value,
				success: (res) => {

				},
				fail: (err) => {
					console.error('加载失败', err); // 强制输出错误详情
				},
			});
		}




	}

	//处理marker点渲染
	const markerTotal = computed(() => {
		let ids = []
	if(markerTotal.length && mapContext.value){
		markerTotal.forEach(i=>{
			ids.push(i.id)
		})
		mapContext.value.removeMarkers({
			markerIds:ids
		})
	}
		
		// 1. 确定要处理的列表
		const list = tagId.value ?
			merchantList.value.filter(a => a.tag_id == tagId.value) :
			merchantList.value;

		// 2. 生成标记点数组
		return list.map(b => ({
			...getmaker(b), // 假设getmaker返回基本marker对象
			...(((b.related_id && b.related_id === curMarker.value) || (!b.related_id && b.id ===
				curMarker.value)) ? getmaker(b, true) : {})
		}));
	});

	watch(tagId, (n) => {
		if (n) {
			const list = merchantList.value.filter(a => a.tag_id == n)
			if (list.length == 0) {
				scale.value = 9
				return
			}
			let arr = []
			list.forEach(item => {
				arr.push({
					latitude: item.lat,
					longitude: item.lnt,
				})
			})
			mapContext.value.includePoints({
				points: arr,
				padding: [120, 120, 120, 120],
				success: (res) => {
					console.log('聚合cg');
				}
			})
		}
	})
	//统一处理marker样式
	const getmaker = (a, tap) => {
		return {
			latitude: a.lat,
			longitude: a.lnt,
			id: a.related_id ? a.related_id : a.id,
			// title: a.name,
			iconPath:a.tag_map_icon?baseUrl+tag_map_icon: a.map_icon ? baseUrl + a.map_icon : '',
			width: tap ? 38 : 32,
			height: tap ? 44 : 37,
			joinCluster: true,
			callout: {}
		}
	}

	//点击切换区域
	const getCurrentCity = (d) => {
		showcounty.value = false
		resMapAreaList(d, 2)
	}

	// 视图变化

	const regionchange = (res) => {
		console.log(res);
		// const MapContext = await getMapContext()
		if (res.type == 'end' && (res.causedBy == 'scale' || res.causedBy == 'gesture')) {
			let scale = res.detail.scale
			// getScale()
			if (res.detail.scale > 10.5 && levtype.value == 1) {
				// getCenterLocation()
				resMapAreaList(11, 2)
				console.log(mapCenter.value.latitude, mapCenter.value.longitude);
			}
			if (res.detail.scale < 10.5 && levtype.value == 2) {
				// Overlay()
				resMapAreaList(1, 1)
			}
			if (res.detail.scale > 15 && levtype.value == 2) {
				resMapAreaList(3, 3)
			}
			if (res.detail.scale < 15 && levtype.value == 3) {
				// Overlay()
				resMapAreaList(11, 2)
			}

		}
	}

	const handleHeightChange = (h) => {
		console.log(h, '高度变化了');
	}
	//打开浮窗
	const getPancel = () => {
		// getSafeLocation()
		console.log(panelHeight.value);
		if (panelHeight.value != 0) {
			panelHeight.value = 0
		} else {
			panelHeight.value = screenHeight.value * 0.3
		}
	}
	const getPancel2 = () => {
		if (panelHeight3.value != 0) {
			panelHeight3.value = 0
		} else {
			panelHeight3.value = screenHeight.value * 0.3
		}
	}
	//获取当前缩放级别
	const getScale = () => {
		mapContext.value.getScale({
			success: (res) => {
				maxScale.value = res.scale
				uni.showToast({
					title: res.scale.toString()
				})
			}
		})
	}
	//将地图中心移动到当前定位点，需要配合map组件的show-location使用
	const moveToLocation = () => {
		getSafeLocation()
	}
	//获取当前中心点
	var getCenterLocation = () => {
		mapContext.value.getCenterLocation({
			success: (res) => {
				console.log(res);
				mapCenter.value = {
					latitude: res.latitude,
					longitude: res.longitude
				}

			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	//点击type
	const scrollToCenter = (index, id) => {

		activeIndex.value = index
		// 计算目标滚动位置
		const targetScrollLeft = index * itemWidth - screenWidth / 2 + itemWidth / 2
		// 限制滚动范围
		const maxScrollLeft = tagList.value.length * itemWidth - screenWidth
		scrollLeft.value = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))
		if (tagId.value == id) {
			tagId.value = ''
		} else {
			tagId.value = id
		}
		curMarker.value = ''


	}

	function isInRectangle(point, bounds) {
		return (
			point.latitude >= bounds.southwest.lat &&
			point.latitude <= bounds.northeast.lat &&
			point.longitude >= bounds.southwest.lng &&
			point.longitude <= bounds.northeast.lng
		);
	}
	// 安全获取定位（完整版）
	const getSafeLocation = async () => {
		try {
			// 1. 检查定位权限
			const status = await checkLocationPermission();
			if (!status) return;

			// 2. 获取定位
			const location = await new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'wgs84',
					altitude: true, // 获取高度（需要设备支持）
					success: resolve,
					fail: reject
				});
			});

			console.log('定位结果:', );
			let curAddress = isInRectangle({
				latitude: location.location,
				longitude: location.longitude
			}, Boundary.value)
			if (!curAddress) {
				uni.showToast({
					title: '不在当前范围内',
					icon: 'error'
				})
				return
			} else {
				mapContext.value.moveToLocation({
					success: (res) => {
						console.log(res);
					}
				})
			}


		} catch (err) {
			console.error('定位流程错误:', err);
			uni.showToast({
				title: '获取位置失败',
				icon: 'none'
			});
		}
	};
	// 检查/申请定位权限
	const checkLocationPermission = async () => {
		try {
			const res = await uni.getSetting({});
			if (!res.authSetting['scope.userLocation']) {
				await uni.authorize({
					scope: 'scope.userLocation'
				});
			}
			return true;
		} catch (err) {
			// 用户拒绝后引导手动开启
			uni.showModal({
				title: '提示',
				content: '需要位置权限才能使用该功能',
				confirmText: '去设置',
				success: (res) => {
					if (res.confirm) uni.openSetting();
				}
			});
			return false;
		}
	};
	// 音频实例
	const isPlaying = ref(false)
	const currentTime = ref(0)
	const duration = ref(0)
	// 获取音频上下文
	// 初始化音频
	const initAudio = (src) => {


		// audioContext.value = uni.createInnerAudioContext();

		// // 设置音频源（可以是网络或本地路径）
		// // audioContext.value.src = src ? baseUrl + src : null
		// // audioContext.value.autoplay = false
		// audioContext.value.onPlay(() => {
		// 	console.log('开始播放')
		// })

		// audioContext.value.onEnded(() => {
		// 	isPlaying.value = false
		// 	console.log('暂停播放')
		// })

		// audioContext.value.onPause(() => {
		// 	isPlaying.value = false
		// 	console.log('暂停播放')
		// })

		// audioContext.value.onStop(() => {
		// 	isPlaying.value = false
		// 	console.log('停止播放')
		// })

		// audioContext.value.onTimeUpdate(() => {
		// 	currentTime.value = audioContext.value.currentTime
		// })

		// // audioContext.value.onCanplay(() => {
		// // 	duration.value = audioContext.value.duration
		// // 	console.log('音频可以播放了，时长:', duration.value)
		// // })

		// audioContext.value.onError((res) => {
		// 	console.error('音频错误:', res)

		// })
	}
const goPay=(url)=>{
	uni.navigateTo({
		url:url
	})
}
	const togglePlay = (src) => {
		audioContext.value.src = src ? baseUrl + src : null
		audioContext.value.play()
		isPlaying.value = true
		// 确保在用户点击事件中同步调用 play()
	}

	// 停止播放
	const stopAudio = () => {
		audioContext.value.stop()
		isPlaying.value = false
	}
	//设施分类
	const activeIndex = ref(0)
	const scrollLeft = ref(0)

	// 获取系统信息计算滚动参数
	const systemInfo = uni.getWindowInfo()
	const screenWidth = systemInfo.screenWidth
	const itemWidth = 70 // 每个项目的宽度，需要与CSS中一致

	watch(panelHeight, (n, o) => {
		if (n != 0 && (panelHeight2.value != 0 || panelHeight3.value != 0)) {
			panelHeight2.value = 0
			panelHeight3.value = 0
		}
	})
	watch(panelHeight2, (n, o) => {
		if (n == 0 && lineId.value && levtype.value != 4) {
			lineId.value = ''
			resMapAreaList(areaInfo.value.id, levtype.value)
		}
		if (n == 0 && lineId.value && levtype.value == 4) {
			lineId.value = ''
			resMerchantIndexApi(areaInfo.value.id.value)
		}
		if (n != 0 && (panelHeight.value != 0 || panelHeight3.value != 0)) {
			panelHeight.value = 0
			panelHeight3.value = 0
		}
	})
	watch(panelHeight3, (n, o) => {
		if (n != 0 && (panelHeight.value != 0 || panelHeight2.value != 0)) {
			panelHeight.value = 0
			panelHeight2.value = 0
		}
	})
	// 获取点位所在地名称
	// 	async function getLocationInfo(lat, lng) {
	// 		return new Promise((resolve) => {
	// 			qqmapsdk.reverseGeocoder({
	// 				location: {
	// 					latitude: lat,
	// 					longitude: lng
	// 				},
	// 				success: (res) => {
	// 					if (res.status === 0 && res.result) {
	// 						const {
	// 							province,
	// 							city,
	// 							district
	// 						} = res.result.address_component;
	// 						resolve({
	// 							province,
	// 							city,
	// 							district
	// 						});
	// 					} else {
	// 						console.warn('逆地理编码结果异常:', res);
	// 						resolve(null);
	// 					}
	// 				},
	// 				fail: (err) => {
	// 					console.error('API调用失败:', err);
	// 					resolve(null);
	// 				},
	// 			});
	// 		});
	// 	}
	// 	// 获取城市并定位到该城市
	// 	const locateCity = (cityName) => {
	// 		type.value = 0

	// 		// 移除边界限制
	// 		// mapContext.value.setBoundary({
	// 		// 	southwest: {
	// 		// 		latitude: -90,
	// 		// 		longitude: -180
	// 		// 	},
	// 		// 	northeast: {
	// 		// 		latitude: 90,
	// 		// 		longitude: 180
	// 		// 	}
	// 		// });
	// 		qqmapsdk.getCityList({
	// 			success: (res) => {
	// 				console.log(res);
	// 				const city = res.result[1].find(item => item.name === cityName)
	// 				if (city) {
	// 					// 更新地图中心点
	// 					mapCenter.value = {
	// 						latitude: city.location.lat,
	// 						longitude: city.location.lng
	// 					}
	// 					scale.value = 10
	// 					// 添加标记点

	// 					markers.value.push({
	// 						id: 7,
	// 						width: '10px',
	// 						height: '15px',
	// 						latitude: city.location.lat,
	// 						longitude: city.location.lng,
	// 						title: city.name,
	// 					})
	// 				}
	// 			}
	// 		})
	// 	}
</script>
<style lang='scss' scoped>
	.page-container {
		min-height: 100vh;
		background: #fdffeb;
		height: 100vh;
		overflow: hidden;

		::v-deep .wd-floating-panel {
			background-color: #fdffeb !important;

			.wd-floating-panel__content {
				background-color: #fdffeb !important;
			}
		}

		.countylist {
			padding: 0 30rpx 20rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;

			.countys {
				box-sizing: border-box;
				position: relative;
				text-align: center;
				margin-right: 23rpx;
				width: 170rpx;
				height: 81rpx;
				line-height: 81rpx;

				image {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
				}

				text {
					font-weight: 500;
					font-size: 28rpx;
					color: #26704E;
					position: relative;
					z-index: 2;
				}
			}

			.more {
				margin-left: 10rpx;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #26704E;
				}
			}
		}
	}

	.counties {
		padding: 0 39rpx;
		display: flex;
		align-items: center;
		height: 100rpx;
		position: relative;

		.cityName {
			display: flex;
			align-items: center;

			>text {
				max-width: 120rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #2B2A25;
				display: inline-block;
				margin-right: 22rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.icon {
				transform: rotate(180deg);
				transition: transform 0.5s ease;
			}
		}

		.intro {
			margin-left: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #777777;

			>text {
				&:first-child {
					margin-right: 18rpx;
				}
			}
		}

		.down {
			position: absolute;
			top: 100rpx;
			left: 20rpx;
			max-height: 300rpx;
			overflow-y: auto;
			width: 250rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			z-index: 3;
			font-weight: 500;
			font-size: 28rpx;
			color: #2B2A25;
			background-color: #fdffeb;
			border-radius: 8rpx;

			>text {
				display: block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 20rpx;
			}
		}
	}

	.otherMak {
		position: fixed;
		top: 100rpx;
		left: 0;
		background-color: #fdffeb;
		width: 100%;
		display: flex;
		z-index: 2;

		.o_mark {
			display: flex;
			align-items: center;
			width: 650rpx;

			.scroll-item {
				width: 130rpx;
				flex-shrink: 0;
			}
		}

		.rightDown {
			width: 100rpx;
			display: flex;
			align-items: center;
			height: 120rpx;
			flex-shrink: 0;

			.yiny {
				display: block;
				width: 20rpx;
				height: 100rpx;
				background: #DFE3BB;
				border-radius: 1rpx;
				opacity: 0.7;
			}

			>view {
				flex: 1;
				font-weight: 400;
				font-size: 24rpx;
				color: #26704E;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 34rpx;
					height: 29rpx;
					margin-bottom: 10rpx;
				}

				.icon {
					transform: rotate(180deg);
					transition: transform 0.5s ease;
				}
			}
		}

	}

	.fixedIndex {
		position: fixed;
		top: 180rpx;
		right: 32rpx;

		image {
			width: 102rpx;
			height: 105rpx;
		}
	}

	.fixedLux {
		position: fixed;
		right: 32rpx;
		bottom: 300rpx;

		image {
			width: 92rpx;
			height: 92rpx;
		}

		view {
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			margin-bottom: 28rpx;
		}

		.lux {
			text {
				text-shadow:
					-1px -1px 0 #D23700,
					/* 左上 */
					1px -1px 0 #D23700,
					/* 右上 */
					-1px 1px 0 #D23700,
					/* 左下 */
					1px 1px 0 #D23700;
			}
		}

		.dingw {
			text {
				text-shadow:
					-1px -1px 0 #3C89F9,
					/* 左上 */
					1px -1px 0 #3C89F9,
					/* 右上 */
					-1px 1px 0 #3C89F9,
					/* 左下 */
					1px 1px 0 #3C89F9;
			}
		}
	}

	.scenicDetail {
		background-color: #FDFFEB;
		padding: 0 30rpx calc(env(safe-area-inset-bottom) + 10px);
		display: flex;
		flex-direction: column;
		height: 100%;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>text {
				font-weight: 500;
				font-size: 36rpx;
				color: #2B2A25;
			}

			.btn {
				display: flex;
				align-items: center;
				font-size: 28rpx;

				>button {
					display: flex;
					margin: 0;
					align-items: center;
					justify-content: center;
					width: 136rpx;
					height: 60rpx;
					border-radius: 6rpx;
					border: 1px solid #1B9D61;
					color: #1B9D61;
					background-color: transparent;
					line-height: normal;
					font-size: 28rpx;
					padding: 0;
				}

				view {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					width: 136rpx;
					height: 60rpx;
					border-radius: 6rpx;
					border: 1px solid #1B9D61;
					background-color: #1B9D61;
					margin-left: 10rpx;

					>text {
						margin-left: 10rpx;
					}
				}
			}
		}

		.tip {
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tips {
				font-weight: 400;
				font-size: 24rpx;
				color: #AA5414;

				text {
					background: #FAECE1;
					padding: 5rpx 15rpx;
					margin-right: 20rpx;
					display: inline-block;
				}
			}

			.audio {

				display: flex;
				align-items: flex-end;

				image {
					width: 139rpx;
					height: 37rpx;
				}

				>text {
					display: inline-block;
					width: 108rpx;
					height: 32rpx;
					background: #FAECE1;
					border-radius: 2rpx;
					line-height: 32rpx;
					text-align: center;
					font-weight: bold;
					font-size: 24rpx;
					color: #A95413;
					margin-left: 10rpx;
				}
			}
		}

		.swiper {
			margin-top: 40rpx;
			position: relative;

			.time {
				margin-bottom: -8rpx;
				display: flex;
				height: 78rpx;
				background: #508963;
				border-radius: 10rpx 10rpx 0rpx 0rpx;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx 20rpx 30rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #fff;
				box-sizing: border-box;

				.openTime {
					>text {
						&:nth-child(2) {
							margin-left: 13rpx;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		.address {
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			position: relative;

			>image {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			view {
				position: relative;
				z-index: 2;
			}

			.info {
				font-weight: 400;
				font-size: 28rpx;
				color: #4D4D4D;
				border-radius: 10rpx;
				flex: 1;
				padding: 13rpx 21rpx;

				>text {
					display: block;

					&:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #777777;
					}
				}
			}

			.getLoc {
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				width: 100rpx;
				height: 90rpx;
				background: #3C89F9;
				border-radius: 0 10rpx 10rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.contentText {
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #2B2A25;
			display: -webkit-box;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
			/* overflow: hidden; */
			line-height: 1.5;
			/* 明确设置行高 */
		}

		.checkSpot {
			margin-top: 40rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			flex: 1;

			.dot {
				margin: 0 50rpx;

				text {
					margin: 0 5rpx;
					display: inline-block;
					width: 12rpx;
					height: 12rpx;
					background: #FDFFEB;
					border-radius: 50%;
					border: 1px solid #508963;
				}

				.act {
					background: #508963;
				}
			}
		}

		.activity {
			margin: 60rpx 0 20rpx;

			>text {
				font-weight: 500;
				font-size: 36rpx;
				color: #2B2A25;
			}

			.info {
				position: relative;
				margin-top: 30rpx;
				width: 690rpx;
				height: 280rpx;
				border-radius: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

				.text {
					position: absolute;
					bottom: 13rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 500;
					font-size: 28rpx;
					padding: 0 20rpx;
					width: 100%;
					color: #FFFFFF;
					box-sizing: border-box;

					>view {
						width: 109rpx;
						height: 36rpx;
						border-radius: 18rpx;
						border: 1px solid #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: 500;
						font-size: 24rpx;
						color: #FFFFFF;
						flex-shrink: 0;

						>text {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}

	.hotWay {
		padding: 0 30rpx env(safe-area-inset-bottom);

		.img {
			display: flex;
			justify-content: center;

			image {
				width: 169rpx;
				height: 70rpx;
			}

			margin-bottom: 33rpx;
		}

		.wayBox {
			margin-bottom: 40rpx;
			width: 100%;
			height: 348rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			view {
				position: relative;
				z-index: 2;
			}

			.wayTitle {
				font-weight: bold;
				font-size: 28rpx;
				color: #D23700;
				height: 86rpx;
				line-height: 86rpx;
				text-align: center;
				background: linear-gradient(to bottom, rgba(210, 55, 0, .3), rgba(255, 255, 255, .2));
			}

			.info {
				box-sizing: border-box;
				height: 202rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				margin: 0 20rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				background-color: rgba(255, 255, 255, .5);

				text {
					display: block;

					&:first-child {
						margin-bottom: 15rpx;
					}
				}
			}
		}
	}

	.scroll-container {
		width: 100%;
		white-space: nowrap;
		position: fixed;
		z-index: 2;
		left: 0;
		min-width: 100vw;
		background: #FDFFEB;
		border-radius: 20rpx;
		transform: translateX(0);
		border-bottom: 3px solid transparent;
		/* 明确初始状态 */
		transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

	}

	.scroll {
		overflow: hidden;
		border-radius: 20rpx;

		::v-deep scroll-view::-webkit-scrollbar {
			display: none !important;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			opacity: 0 !important;
		}
	}

	.scroll-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 70px;
		background: #FDFFEB;
		text-align: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #2B2A25;
		padding: 10px 0;

		image {
			width: auto;
			height: 42rpx;
			margin-bottom: 15rpx;
		}
	}

	.scroll-item.active {
		color: #26704E;
	}

	#myMap {
		width: 100%;
		height: calc(100vh - 100rpx);
	}
</style>